<template>
  <je-modal
    v-model:visible="visible"
    class="data-dictionary-value-config"
    width="1200px"
    :title="title"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="handleOk"
    @close="handleClose"
  >
    <je-form
      ref="formRef"
      class="form"
      :rules="rules"
      :model="formState"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      size="small"
      autocomplete="off"
    >
      <je-collapse v-model:activeKey="activeKey" expand-icon-position="right">
        <je-collapse-panel key="1" header="核心配置">
          <je-row>
            <je-col :span="8">
              <je-form-item label="数据字典" name="ddName">
                <je-grid-select
                  v-model:value="formState.ddName"
                  :disabled="disabled"
                  name="ddName"
                  config-info="JE_CORE_DICTIONARY,ddName~ddCode~ddType,DICTIONARY_DDNAME~DICTIONARY_DDCODE~DICTIONARY_DDTYPE,S"
                  @select="selectDic"
                />
              </je-form-item>
            </je-col>
            <je-col :span="8">
              <je-form-item label="字典类型" name="ddType">
                <je-select
                  v-model:value="formState.ddType"
                  :disabled="disabled"
                  allow-clear
                  config-info="DDTYPE,formState.ddType,code,S"
                />
              </je-form-item>
            </je-col>

            <je-col :span="8">
              <je-form-item label="带值方式" name="ddValueType">
                <je-radio-group v-model:value="formState.ddValueType" style="margin-top: 5px">
                  <je-radio value="S">单选(s)</je-radio>
                  <je-radio value="M">多选(m)</je-radio>
                </je-radio-group>
              </je-form-item></je-col
            >
          </je-row>

          <je-form-item name="RESOURCEFIELD_WHERESQL">
            <template #label>
              <div
                class="iconWrap"
                @click="
                  showModal({
                    type: 'SqlFilter',
                    title: '过滤配置',
                    key: 'RESOURCEFIELD_WHERESQL',
                    value: formState.RESOURCEFIELD_WHERESQL,
                  })
                "
              >
                <i class="fal fa-filter" style="color: #8d98ab"></i>
                过滤条件
              </div>
            </template>
            <je-input v-model:value="formState.RESOURCEFIELD_WHERESQL" />
          </je-form-item>

          <je-form-item label="条件说明" name="sqlRemark">
            <je-input v-model:value="formState.sqlRemark" />
          </je-form-item>
        </je-collapse-panel>
        <!-- <je-collapse-panel
          v-if="['treessfield'].indexOf(recordData.RESOURCEFIELD_XTYPE) != -1"
          key="2"
          header="树形字典"
        >
          <je-form-item label="级联方式" name="selectType">
            <je-radio-group v-model:value="formState.selectType" style="margin-top: 5px">
              <je-radio value="N">上下都不级联</je-radio>
              <je-radio value="T">选父节点级联选中子节点</je-radio>
              <je-radio value="D">选子节点级联选择父节点</je-radio>
            </je-radio-group>
          </je-form-item>

          <je-form-item label="快查字段" name="queryField">
            <je-select
              v-model:value="formState.queryField"
              allow-clear
              placeholder="快速查询起效，改为本字段为目标查询字段。"
              name="queryField"
              :options="queryFieldOptions.filter((_items) => _items.value != '')"
            >
            </je-select>
          </je-form-item>

          <je-form-item label="快查取值字段" name="valueField">
            <je-select
              v-model:value="formState.valueField"
              allow-clear
              name="valueField"
              placeholder="快速查询起效，从树形制定属性取值拼接条件。"
              :options="valueFieldOptions.filter((_items) => _items.value != '')"
            >
            </je-select>
          </je-form-item>

          <je-row>
            <je-col :span="12">
              <je-form-item label="展开层数" name="levelNumber">
                <je-number-input
                  v-model:value="formState.levelNumber"
                  style="width: 100%"
                  :min="0"
                  placeholder="树形展开层数，0表示展开一层。"
                />
              </je-form-item>
            </je-col>
            <je-col :span="12">
              <je-form-item label="是否多根" name="isPlusRoot">
                <je-select v-model:value="formState.isPlusRoot" allow-clear>
                  <je-select-option
                    v-for="(item, index) in [
                      { code: '1', text: '是' },
                      { code: '0', text: '否' },
                    ]"
                    :key="index"
                    :value="item.code"
                  >
                    {{ item.text }}
                  </je-select-option>
                </je-select>
              </je-form-item>
            </je-col>
          </je-row>
        </je-collapse-panel> -->
        <je-collapse-panel key="3" header="带值规则">
          <div class="tableWrap">
            <je-table
              ref="xTable"
              class="table"
              border
              stripe
              auto-resize
              sync-resize
              draggable
              show-overflow="ellipsis"
              keep-source
              show-header-overflow
              resizable
              header-align="center"
              :style="`height: ${tableHeight}`"
              :scroll-y="{ mode: 'wheel' }"
              :edit-config="{
                trigger: 'click',
                mode: 'cell',
                showUpdateStatus: true,
              }"
              :row-config="{ isCurrent: true, isHover: true }"
              :store="tableData"
              size="mini"
              @edit-closed="editClosed"
              @drop="codesArrDrop"
            >
              <je-table-column field="index" title="序号" width="50" align="center">
              </je-table-column>
              <!-- <je-table-column field="pkName" title="唯一" width="50" align="center">
                <template #default="{ row }">
                  <je-checkbox v-model:checked="row.pkName" />
                </template>
              </je-table-column> -->
              <je-table-column field="text" title="字典项" width="140" align="center">
              </je-table-column>
              <je-table-column
                field="code"
                title="项编码"
                width="220"
                :edit-render="{}"
                align="center"
              >
                <template #edit="{ row, rowIndex }">
                  <je-select
                    v-model:value="row.code"
                    editable
                    :options="[
                      { label: 'id', value: 'id' },
                      { label: 'code', value: 'code' },
                      { label: 'text', value: 'text' },
                    ]"
                    :get-popup-container="getPopupContainer"
                    @change="inputChange(row, rowIndex)"
                  />
                </template>
              </je-table-column>
              <je-table-column
                field="fieldName"
                title="表单字段名"
                width="220"
                :edit-render="{ autofocus: '.ant-input' }"
              >
                <template #edit="{ row }">
                  <!-- <div class="inputWrap">
                    <je-input v-model:value="row.fieldName" />
                    <i class="setIcon fal fa-cog"></i>
                  </div> -->
                  <je-grid-select
                    v-model:value="row.fieldName"
                    name="fieldName"
                    config-info="JE_CORE_RESOURCEFIELD,fieldName~fieldCode,RESOURCEFIELD_NAME~RESOURCEFIELD_CODE,S"
                    :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
                    :querys="getJQuery()"
                  />
                </template>
              </je-table-column>
              <je-table-column field="fieldCode" title="表单字段编码" min-width="220">
              </je-table-column>
              <je-table-column
                v-if="['treessfield'].indexOf(recordData.RESOURCEFIELD_XTYPE) != -1"
                field="isExtractPath"
                title="提取路径"
                width="80"
                align="center"
              >
                <template #default="{ row }">
                  <je-switch v-model:value="row.isExtractPath" mode="checkbox" />
                </template>
              </je-table-column>
              <je-table-column width="40" align="center">
                <template #header>
                  <i
                    style="font-size: 16px; cursor: pointer"
                    class="fal fa-plus"
                    @click="addColumn"
                  ></i>
                </template>
                <template #default="{ rowIndex, row }">
                  <i
                    style="font-size: 16px; cursor: pointer"
                    class="fal fa-times"
                    @click="deleteColumn(rowIndex, row)"
                  ></i>
                </template>
              </je-table-column>
            </je-table>
          </div>
          <template #extra
            ><i
              :class="[activeKey.length > 1 ? 'jeicon jeicon-an' : 'jeicon jeicon-packup']"
              style="padding-right: 30px; cursor: pointer"
              @click="handleClick"
            ></i
          ></template>
        </je-collapse-panel>
      </je-collapse>
    </je-form>

    <div v-if="modalOption.modalFlag">
      <component
        :is="modalOption.activeModal"
        :visble="modalOption.modalFlag"
        :record-data="modalOption.recordData"
        @btnClick="btnClick"
      ></component>
    </div>
  </je-modal>
</template>

<script>
  import { ref, toRefs, reactive, defineComponent, onMounted } from 'vue';
  import { Collapse, Row, Col } from 'ant-design-vue';

  import {
    Grid,
    Modal,
    Input,
    InputSelect,
    InputNumber,
    Form,
    Select,
    Checkbox,
    Radio,
    Data,
    Switch,
  } from '@jecloud/ui';

  import { showFuncQuerys } from '@jecloud/func';

  import { getData } from '@/api/index';

  import { debounce, decode, encode } from '@jecloud/utils';

  export default defineComponent({
    name: 'DataDictionaryValueConfig',
    components: {
      JeModal: Modal,
      JeCollapse: Collapse,
      JeCollapsePanel: Collapse.Panel,
      JeRow: Row,
      JeCol: Col,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeNumberInput: InputNumber,
      JeSelect: Select,
      JeSelectOption: Select.Option,
      JeCheckbox: Checkbox,
      JeCheckboxGroup: Checkbox.Group,
      JeRadio: Radio,
      JeRadioGroup: Radio.Group,
      JeTable: Grid,
      JeTableColumn: Grid.Column,
      // SqlFilter,
      JeGridSelect: InputSelect.Grid,
      JeSwitch: Switch,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      recordData: {
        type: Object,
        default: () => {},
      },
      basicFields: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    emits: ['changeModal'],
    setup(props, { emit }) {
      const state = reactive({
        visible: props.visble,
        title: '带值配置（数据字典）',
        activeKey: ['1', '3'],
        formRef: ref(),
        formState: props.recordData,
        funcId: props.recordData.RESOURCEFIELD_FUNCINFO_ID,
        labelCol: {
          style: { width: '100px' },
        },
        height: props.recordData.RESOURCEFIELD_XTYPE == 'treessfield' ? 'auto' : '650px',
        wrapperCol: {},
        rules: {},
        tableData: Data.Store.useGridStore({
          data: [],
        }),
        selectVal: '',
        arrCode: [
          { text: 'id', code: 'id' },
          { text: 'text', code: 'text' },
          { text: 'code', code: 'code' },
        ],
        queryFieldOptions: [],
        valueFieldOptions: [],
        disabled: true,
        tableHeight: null,
      });

      const modalOption = reactive({
        modalFlag: false, // 默认modal都是隐藏的false
        activeModal: '', // 默认没有激活的弹窗类型
      });

      //项编码值改变
      const inputChange = debounce((row, rowIndex) => {
        const nodeCfg = {
          id: '主键',
          text: '名称',
          code: '编码',
        };
        row.text = nodeCfg[row.code] || '其他';
        //如果是树形选择,树形选择(大)修改快查取值字段下拉框的数据
        if (['treessfield'].indexOf(props.recordData.RESOURCEFIELD_XTYPE) != -1) {
          state.valueFieldOptions[rowIndex] = { value: row.code, lable: row.code };
        }
      }, 300);

      const methods = {
        getPopupContainer() {
          return document.body;
        },
        // 拖拽功能字段
        codesArrDrop() {
          state.tableData.data.forEach((item, index_) => {
            item.index = index_ + 1;
          });
        },
        handleClick(event) {
          // 如果是树形选择的话，高度也要变化
          if (['treessfield'].indexOf(props.recordData.RESOURCEFIELD_XTYPE) != -1) {
            if (state.activeKey.length == 1) {
              state.activeKey = ['1', '3'];
              state.tableHeight = `calc(100vh - 485px)`;
              console.log('1');
            } else {
              state.activeKey = ['3'];
              console.log('2');
              state.tableHeight = `calc(100vh - 335px)`;
            }
          } else {
            if (state.activeKey.length == 1) {
              state.activeKey = ['1', '3'];
              console.log('3');
              state.tableHeight = `calc(100vh - 485px)`;
            } else {
              console.log('4');
              state.activeKey = ['3'];
              state.tableHeight = `calc(100vh - 335px)`;
            }
          }
          event.stopPropagation();
        },
        handleClose() {
          state.visible = false;
          emit('changeModal', { isShow: false });
        },
        //点击确定按钮
        handleOk() {
          //RESOURCEFIELD_OTHERCONFIG
          //数据开始封装
          var data = {
            // RESOURCEFIELD_CONFIGINFO: '',
            RESOURCEFIELD_CONDITION_DESC: state.formState.sqlRemark,
            RESOURCEFIELD_WHERESQL: state.formState.RESOURCEFIELD_WHERESQL,
          };
          //开始封装CONFIGINFO
          let configInfo = '';
          const tableData = state.tableData.data;
          const ddCode = state.formState.ddCode;
          const ddValueType = state.formState.ddValueType;
          const config = decode(state.formState.RESOURCEFIELD_OTHERCONFIG ?? '{}') ?? {};
          if (tableData.length > 0) {
            const ddCodes = [],
              fieldCode = [],
              pkNames = [];

            tableData.forEach((item, index) => {
              item.index = index + 1;
              if (item.isExtractPath == '1') {
                pkNames.push(item.code);
              }
              if (item.code != '' && item.fieldCode != '') {
                //如果提取路径为true
                if (
                  ['treessfield'].indexOf(props.recordData.RESOURCEFIELD_XTYPE) != -1 &&
                  item.isExtractPath == '1'
                ) {
                  ddCodes.push(item.code + '_');
                } else {
                  ddCodes.push(item.code);
                }

                fieldCode.push(item.fieldCode);
              }
            });
            if (ddCode.length > 0 && fieldCode.length > 0) {
              configInfo =
                ddCode + ',' + fieldCode.join('~') + ',' + ddCodes.join('~') + ',' + ddValueType;
            } else {
              configInfo = ddCode + ',,,' + ddValueType;
            }
            if (pkNames.length > 1) {
              Modal.alert('字段唯一标识只能选择一个！', 'warning');
              return false;
            } else {
              config.pkName = pkNames[0] || '';
            }
          } else {
            configInfo = ddCode + ',,,' + ddValueType;
          }

          //如果是树形选择,树形选择(大)
          if (['treessfield'].indexOf(props.recordData.RESOURCEFIELD_XTYPE) != -1) {
            config.cascadeType = state.formState.selectType; //级联方式
            config.queryField = state.formState.queryField; //快查字段
            config.nodeField = state.formState.valueField; //取值字段
            config.expandDepth = state.formState.levelNumber; //展开层数
            config.multipleRoot = state.formState.isPlusRoot; //是否多根
          }
          data.RESOURCEFIELD_OTHERCONFIG = encode(config);
          data.RESOURCEFIELD_CONFIGINFO = configInfo;
          emit('changeModal', {
            type: 'DataDictionaryValueConfig',
            visible: false,
            data: data,
          });

          return false;
        },

        showModal(obj) {
          // sqlEditorModal({
          //   value: state.formState[obj.key],
          //   funcId:
          //     '60c01feb-d857-400b-91e1-b307b1c34c87' || props.recordData.RESOURCEFIELD_FUNCINFO_ID,
          //   callback: (res) => {
          //     state.formState[obj.key] = res;
          //   },
          // });
          showFuncQuerys({
            value: state.formState[obj.key],
            funcId:
              '60c01feb-d857-400b-91e1-b307b1c34c87' || props.recordData.RESOURCEFIELD_FUNCINFO_ID,
            callback: (value) => {
              state.formState[obj.key] = value;
            },
          });
        },

        btnClick(obj) {
          modalOption.modalFlag = false;

          if (obj.type === 'ok') {
            state.formState[modalOption.key] = obj.value;
          }
        },

        deleteColumn(index, row) {
          state.tableData.remove(row);

          //如果是树形选择,树形选择(大)删除快查字段,快查取值字段下拉框的数据
          if (['treessfield'].indexOf(props.recordData.RESOURCEFIELD_XTYPE) != -1) {
            state.queryFieldOptions.splice(index, 1);
            state.valueFieldOptions.splice(index, 1);
          }
        },

        addColumn() {
          const record = {
            text: '其他',
            code: '',
            fieldName: '',
            fieldCode: '',
            index: state.tableData.data.length + 1,
          };
          state.tableData.insert(record, -1);
          //如果是树形选择,树形选择(大)添加快查字段,快查取值字段下拉框的数据
          if (['treessfield'].indexOf(props.recordData.RESOURCEFIELD_XTYPE) != -1) {
            state.queryFieldOptions.push({ value: '', label: '' });
            state.valueFieldOptions.push({ value: '', label: '' });
          }
        },

        editClosed({ row, rowIndex }) {
          //如果是树形选择,树形选择(大)修改快查字段,下拉框的数据
          if (['treessfield'].indexOf(props.recordData.RESOURCEFIELD_XTYPE) != -1) {
            setTimeout(() => {
              state.queryFieldOptions[rowIndex] = { value: row.fieldCode, label: row.fieldCode };
            }, 500);
          }
        },

        //查询选择值改变触发
        selectDic({ rows }) {
          if (rows && rows.length > 0) {
            const ddName = rows[0].DICTIONARY_DDNAME;
            const ddCode = rows[0].DICTIONARY_DDCODE;
            const ddType = rows[0].DICTIONARY_DDTYPE;
            //选择的字典不重复
            if (state.formState.ddCode != ddCode) {
              //清空表单数据
              state.tableData.loadData([]);
              //给表单赋值
              state.formState.ddCode = ddCode;
              state.formState.ddType = ddType;
              //给列表赋值
              const code = props.recordData.RESOURCEFIELD_CODE;
              const xtype = props.recordData.RESOURCEFIELD_XTYPE;
              const fieldName = props.recordData.RESOURCEFIELD_NAME;
              const tableDatas = [];
              if (props.basicFields.length > 0) {
                let name = '';
                const cfg = ['ID', 'CODE', 'NAME'],
                  nodeCfg = ['id', 'code', 'text'];
                cfg.forEach((c) => {
                  if (code.substring(code.length - c.length) == c) {
                    name = code.substring(0, code.length - c.length);
                  }
                });
                if (name != '') {
                  cfg.forEach((c, index) => {
                    if (props.basicFields.indexOf(name + c) != -1) {
                      tableDatas.push({
                        text: nodeCfg[index],
                        code: nodeCfg[index],
                        fieldName: name + c,
                        fieldCode: name + c,
                      });
                    }
                  });
                } else {
                  tableDatas.push({
                    text: '编码',
                    code: 'code',
                    fieldName: fieldName,
                    fieldCode: code,
                  });
                }
                state.tableData.loadData(tableDatas);
              }
            }
          }
        },

        //数据回显
        async doDataPlayback() {
          const {
            RESOURCEFIELD_CONFIGINFO,
            RESOURCEFIELD_OTHERCONFIG,
            RESOURCEFIELD_CONDITION_DESC,
          } = state.formState;
          state.formState.sqlRemark = RESOURCEFIELD_CONDITION_DESC;
          //核心配置回显
          const configInfo = RESOURCEFIELD_CONFIGINFO ? RESOURCEFIELD_CONFIGINFO.split(',') : [];
          let fieldInfos = ''; //表字段
          let dicInfos = ''; //表字段对应的字典字段
          let fieldsObj = {};
          if (configInfo.length > 0) {
            fieldsObj = await methods.getFieldInfo();

            const ddCode = configInfo[0]; //字典编码
            fieldInfos = configInfo[1] || ''; //表字段
            dicInfos = configInfo[2] || ''; //表字段对应的字典字段
            const ddValueType = configInfo[3] || ''; //类型
            let dicData = {};
            //带值方式回显
            state.formState.ddValueType = ddValueType || 'S';
            if (ddCode != '' && ddCode != undefined) {
              dicData = await methods.getDicInfo(ddCode);
              //回显字典的数据
              if (dicData.DICTIONARY_DDNAME) {
                state.formState.ddName = dicData.DICTIONARY_DDNAME;
                state.formState.ddType = dicData.DICTIONARY_DDTYPE;
                state.formState.ddCode = dicData.DICTIONARY_DDCODE;
              }
            }
          }
          //带值规则回显
          //如果是 非树形选择,树形选择(大)类型,就没有提取路径isExtractPath
          if (fieldInfos != undefined && dicInfos != undefined) {
            const dicFields = dicInfos && dicInfos.split('~');
            const fieldDatas = fieldInfos.split('~');
            const nodeCfg = {
              id: { text: '主键', code: 'id' },
              text: { text: '名称', code: 'text' },
              code: { text: '编码', code: 'code' },
              id_: { text: '主键', code: 'id' },
              text_: { text: '名称', code: 'text' },
              code_: { text: '编码', code: 'code' },
            };
            if (dicFields.length > 0) {
              //回显辅助配置项 RESOURCEFIELD_OTHERCONFIG
              const config = decode(RESOURCEFIELD_OTHERCONFIG ?? '{}') ?? {};
              const tableDatas = [];
              dicFields.forEach((item, index) => {
                const rec = {
                  text: nodeCfg[item] ? nodeCfg[item].text : '其他',
                  code: nodeCfg[item] ? nodeCfg[item].code : item,
                  fieldName: fieldsObj[fieldDatas[index]] || fieldDatas[index],
                  fieldCode: fieldDatas[index],
                  index: index + 1,
                };
                // rec.pkName = isNotEmpty(config.pkName) ? rec.code == config.pkName : '0';
                if (['treessfield'].indexOf(props.recordData.RESOURCEFIELD_XTYPE) != -1) {
                  state.queryFieldOptions.push({
                    value: fieldDatas[index],
                    label: fieldDatas[index],
                  });
                  state.valueFieldOptions.push({ value: rec.code, label: rec.code });
                  rec.isExtractPath = rec.code == config.pkName ? '1' : '0';
                }
                tableDatas.push(rec);
              });
              state.tableData.loadData(tableDatas);
            }
          }
          //树形字典回显
          //只有树形选择,树形选择(大)类型的字段回显数据
          if (['treessfield'].indexOf(props.recordData.RESOURCEFIELD_XTYPE) != -1) {
            const config = decode(RESOURCEFIELD_OTHERCONFIG ?? '{}') ?? {};
            state.formState.selectType = config.cascadeType || ''; //级联方式
            state.formState.queryField = config.queryField || ''; //快查字段
            state.formState.valueField = config.nodeField || ''; //取值字段
            state.formState.levelNumber = config.expandDepth || ''; //展开层数
            state.formState.isPlusRoot = config.multipleRoot; //是否多根
          }
        },
        //根据数据字典的code查询字典的信息
        async getDicInfo(ddCode) {
          let dicInfo = {};
          await getData({
            tableCode: 'JE_CORE_DICTIONARY',
            limit: '-1',
            j_query: JSON.stringify([
              {
                code: 'DICTIONARY_DDCODE',
                type: '=',
                value: ddCode,
                cn: 'and',
              },
            ]),
          })
            .then((data) => {
              dicInfo = data[0];
              return data[0];
            })
            .catch((e) => {
              Modal.alert(e.message, 'error');
            });
          return dicInfo;
        },
        //根据funId查询表单列表的数据
        async getFieldInfo() {
          let fieldInfo = {};
          await getData({
            tableCode: 'JE_CORE_RESOURCEFIELD',
            limit: '-1',
            j_query: JSON.stringify([
              {
                code: 'RESOURCEFIELD_FUNCINFO_ID',
                type: '=',
                value: props.recordData.RESOURCEFIELD_FUNCINFO_ID,
                cn: 'and',
              },
            ]),
          })
            .then((data) => {
              data.forEach((item) => {
                fieldInfo[item.RESOURCEFIELD_CODE] = item.RESOURCEFIELD_NAME;
              });
              return fieldInfo;
            })
            .catch((e) => {
              Modal.alert(e.message, 'error');
            });
          return fieldInfo;
        },
        //分装j_query
        getJQuery() {
          let j_query = [
            {
              code: 'RESOURCEFIELD_FUNCINFO_ID',
              type: '=',
              value: props.recordData.RESOURCEFIELD_FUNCINFO_ID,
              cn: 'and',
            },
          ];
          return j_query;
        },
      };

      onMounted(async () => {
        await methods.doDataPlayback();
        // 如果是树形选择的话，高度也要变化
        if (['treessfield'].indexOf(props.recordData.RESOURCEFIELD_XTYPE) != -1) {
          state.tableHeight = `calc(100vh - 485px)`;
        } else {
          state.tableHeight = `calc(100vh - 485px)`;
        }
      });

      return {
        modalOption,
        inputChange,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style lang="less" scoped>
  .data-dictionary-value-config {
    .inputWrap {
      position: relative;
      .setIcon {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translate(0, -50%);
        cursor: pointer;
      }
    }
    .iconWrap {
      cursor: pointer;
    }
    .tableWrap {
      height: 100%;
    }
  }
</style>
